<!DOCTYPE html>
<html lang="en" xmlns:th = "http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./loading/load.css" rel="stylesheet">
    <link rel="stylesheet" href="css/html.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/ul.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/topic.css">
    <link rel="stylesheet" href="css/scrollbar.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.css">
    <link rel="shortcut icon" href="img/starfall.png" type="image/x-icon">
    <title>StarFall</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js" type="text/javascript"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.js" type="text/javascript"></script>
    <script src="js/click_power.js" type="text/javascript"></script>

</head>
<body background="img/bg.png" onload="notice_start()">
<div class="load">
    <div class="cube">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script src="./loading/load.js"></script>
<div class="top">
    <div class="starfall">StarFall</div>
    <input type="hidden" th:value="${session.noticeLength}" id="NoticeLength">
    <ul class="notice" id="notice" >
        <li th:each="notice:${session.notices}" th:text="${notice.content}"></li>
    </ul>
    <div class="carousel slide" id="ppt" data-bs-ride="carousel" data-bs-interval="3000" style="left: 0px">
        <div class="idppt_select">
            <img src="./img/top/top1.png" alt="" data-bs-target="#ppt" data-bs-slide-to="0" class="active">
            <img src="./img/top/top2.png" alt="" data-bs-target="#ppt" data-bs-slide-to="1">
            <img src="./img/top/top3.png" alt="" data-bs-target="#ppt" data-bs-slide-to="2">
            <img src="./img/top/top4.png" alt="" data-bs-target="#ppt" data-bs-slide-to="3">
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img decoding="async" src="./img/top/top1.png" alt="img1" class="d-block pptImage">
            </div>
            <div class="carousel-item">
                <img decoding="async" src="./img/top/top2.png" alt="img2" class="d-block pptImage" >
            </div>
            <div class="carousel-item">
                <img decoding="async" src="./img/top/top3.png" alt="img3" class="d-block pptImage">
            </div>
            <div class="carousel-item">
                <img decoding="async" src="./img/top/top4.png" alt="img4" class="d-block pptImage">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</div>
<ul id="ul">
    <div class="minSearch">
        <form action="/topic/search" method="get">
            <div>
                <input type="text" name="search"><button type="submit"></button>
            </div>
        </form>
    </div>
    <li id="ul_li"><a id="ul_home" class="active"><b>首页</b><br><span>home</span></a></li>
    <li id="ul_li"><a id="ul_works" class="ul_border"><b>作品</b><br><span>works</span></a></li>
    <li id="ul_li"><a class="ul_border" href="https://blog.csdn.net/weixin_46396315?type=blog"><b>博客</b><br><span>Blog</span></a></li>
    <li id="ul_li"><a class="ul_border" href="/topic"><b>主题</b><br><span>topic</span></a></li>
    <li id="ul_li" th:if="${ session.user != null && session.user.promise >= 100}"><a class="ul_border" href="/administer/html"><b>管理</b><br><span>admin</span></a></li>
    <div th:if="${session.user} != null" class="user ul_border">
        <img th:src="@{'/head_img/'+${session.user.head}}" alt="" class="head_img">
        <div class="menu">
            <p th:text="${session.user.name}">User</p>
            <div class="exp">
                <input class="expBarValue" type="hidden" th:value="${session.userExp.present}">
                <div class="expBar"></div>
            </div>
            <span class="level"><span th:text="'Lv:'+${session.user.level}">Lv:1</span>&ensp;&ensp;<span th:text="${session.userExp.exp}+'/'+${session.userExp.maxExp}">0/1</span></span>
            <div class="operate">
                <a class="ul_border" href="/set">设置</a>
                <a class="ul_border" href="/signIn">签到</a>
                <a class="ul_border" href="/exit">退出</a>
            </div>
        </div>
        <script src="./js/exp.js"></script>
    </div>
    <div th:if="${session.user} == null" class="unuser ul_border" onclick="window.location.href='/login'">
        <span>请登录，谢谢</span>
        <br><br>
        <span>Login</span>
    </div>
</ul>
<div class="return_top" id="rt"><img src="./img/icon/Rtop.png" alt=""></div>
<div class="mainContent">
    <div class="home" id="home">
        <div class="home_top"></div>
        <div class="home_left"></div>
        <div class="home_right"></div>
        <div class="home_foot"></div>
        <div class="home_content">
            <button class="createTopic" th:if="${session.user != null && session.user.promise >= 10}" onclick="window.location.href='/topic/publish'">发&nbsp;帖</button>
            <div class="carousel slide" id="ad" data-bs-ride="carousel" data-bs-interval="2500">
                <div class="carousel-inner" >
                    <div class="carousel-item active"><img src="./img/ad/1.jpg" class="d-block" style="width: 100%;" alt=""></div>
                    <div class="carousel-item"><img src="./img/ad/2.png" class="d-block" style="width: 100%;" alt=""></div>
                    <div class="carousel-item"><img src="./img/ad/3.png" class="d-block" style="width: 100%;" alt=""></div>
                    <div class="carousel-item"><img src="./img/ad/4.png" class="d-block" style="width: 100%;" alt=""></div>
                    <div class="carousel-item"><img src="./img/ad/5.png" class="d-block" style="width: 100%;" alt=""></div>
                    <div class="carousel-item"><img src="./img/ad/6.png" class="d-block" style="width: 100%;" alt=""></div>
                </div>
                <div class="select">
                    <button class="pre" data-bs-target="#ad" data-bs-slide="prev"></button>
                    <div class="selectImgDiv">
                        <div class="selectImg" data-bs-target="#ad" data-bs-slide-to="0"><img src="./img/ad/1.jpg"alt=""></div>
                        <div class="selectImg" data-bs-target="#ad" data-bs-slide-to="1"><img src="./img/ad/2.png"alt=""></div>
                        <div class="selectImg" data-bs-target="#ad" data-bs-slide-to="2"><img src="./img/ad/3.png"alt=""></div>
                        <div class="selectImg" data-bs-target="#ad" data-bs-slide-to="3"><img src="./img/ad/4.png"alt=""></div>
                        <div class="selectImg" data-bs-target="#ad" data-bs-slide-to="4"><img src="./img/ad/5.png"alt=""></div>
                        <div class="selectImg" data-bs-target="#ad" data-bs-slide-to="5"><img src="./img/ad/6.png"alt=""></div>
                    </div>
                    <button class="next" data-bs-target="#ad" data-bs-slide="next"></button>
                </div>
            </div>
            <div class="topicDiv" id="topicDiv">
                <table class="topicContent" id="topicContent">
                    <tr style="border-bottom: 1px solid rgb(194, 173, 142);">
                        <th> </th>
                        <th></th>
                        <th>
                            <button class="showall" onclick="window.location.href='/topic'" th:if="${session.topics.isEmpty() || session.labelTF == true}">显示所有</button>
                            <button style="height: 30px;outline:0;background-color: transparent;opacity: 0">&nbsp;<!--你无论怎么按也没用，因为这里什么都没有--></button>
                        </th>
                        <th>作者</th>
                        <th>观看/回复</th>
                        <th> </th>
                    </tr>
                    <tr  th:if="${session.topics.isEmpty()}" >
                        <td style="color:darkred">!未找到主题，请重试!</td>
                    </tr>
                    <tr class="topic" th:each="topic : ${session.topics}">
                        <td class="icon"><img th:src="'./img/topic/icon/'+${topic.icon}" alt="文章图标"></td>
                        <td class="lab"><a th:href="'/topic?label='+${topic.labelHref}"><span th:text="'['+${topic.label}+']'">标签</span></a></td>
                        <td class="title"><a th:href="'/topic/html?html='+${topic.id}" style="color: black;font-weight: bold;" th:text="${topic.title}">title标题</a></td>
                        <td class="author"><span class="span1"><a th:href="'/personal?user='+${topic.user}" th:text="${topic.username}">username</a></span><span class="date" th:text="${topic.date}">0000-00-00</span></td>
                        <td class="number"><span class="up" th:text="${topic.comment}">10</span><span class="down" th:text="${topic.view}">100</span></td>
                        <td class="head"><img th:src="'./head_img/'+${topic.userhead}" alt="头像"></td>
                    </tr>
                </table>
            </div>
            <div class="page">
                <a th:href="'javascript:'+|page(1,${session.topicPage.getLastPage()},${session.label})|" class="back"></a>
                <a th:href="'javascript:'+|page(${session.topicPage.getPage()}-1,${session.topicPage.getLastPage()},${session.label})|" class="pre" ></a>
                <span th:text="${session.topicPage.getPage()}+'/'+${session.topicPage.getLastPage()}">1/10</span>
                <a th:href="'javascript:'+|page(${session.topicPage.getPage()}+1,${session.topicPage.getLastPage()},${session.label})|" class="next"></a>
                <a th:href="'javascript:'+|page(${session.topicPage.getLastPage()},${session.topicPage.getLastPage()},${session.label})|" class="last"></a>
            </div>
        </div>
    </div>
</div>
<div class="tail"><p>Star Fall<br>始于2016</p></div>
</body>
<script src="js/html.js" type="text/javascript"></script>
<script src="js/topic.js" type="text/javascript"></script>
</html>